<template>
  <div class="page">
    <el-card>
      <div class="head" slot="header">安装程序</div>
      <div class="box-form">
        <div class="title">数据库配置</div>
        <mixForm :rules="rules" v-model="form" :fields="fields" labelWidth="120px" />
        <div class="title">管理员配置</div>
        <mixForm :rules="rules" v-model="form" :fields="fields1" labelWidth="120px" />
      </div>
    </el-card>
  </div>
</template>

<script>
import md5 from "md5";
import { install_add, install_list } from "@/api";
export default {
  data() {
    return {
      form: {},
      fields: [
        { label: "数据库地址", prop: "dbhost", placeholder: "默认：127.0.0.1" },
        { label: "数据库端口", prop: "dbport", placeholder: "默认：27017" },
        { label: "数据库名称", prop: "dbname", placeholder: "默认：test" },
        { label: "数据库账号", prop: "dbuser", placeholder: "默认：root" },
        { label: "数据库密码", prop: "dbpass", placeholder: "默认：root" }
      ],
      fields1: [
        { label: "管理员名称", prop: "username", placeholder: "默认：admin" },
        { label: "管理员密码", prop: "password", placeholder: "默认：123456" },
        { k: "button", label: "开始安装", click: this.add }
      ],
      rules: {
        dbhost: {
          required: true,
          pattern: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
          message: "请输入正确的主机地址"
        },
        dbport: {
          required: true,
          pattern: /^([1-9]|[1-5]\d{4}|6[1-4]\d{3}|65[1-4]\d{2}|655[1-2]\d|6553[1-5])$/,
          message: "请输入正确的端口"
        },
        dbname: {
          required: true,
          pattern: /^[a-z]\w{1,20}$/,
          message: "请输入正确的数据库名称"
        },
        username: {
          required: true,
          pattern: /^[a-z0-9A-Z\u4e00-\u9fa5@.]{1,20}$/,
          message: "请输入正确的账户名称"
        },
        password: {
          required: true,
          pattern: /^[a-z0-9A-Z.]{1,30}$/,
          message: "请输入正确的账户密码"
        }
      }
    };
  },
  async beforeMount() {
    try {
      let { data } = await install_list();
      if (data.data.install) this.$router.replace("/login");
    } catch (error) {
      this.$router.replace("/login");
    }
  },
  methods: {
    async add() {
      try {
        let params = {
          dbhost: "127.0.0.1",
          dbport: 27017,
          dbname: "test",
          dbuser: "root",
          dbpass: "root",
          username: "admin",
          password: "123456",
          ...this.form
        };
        params.password = md5(params.password);
        await install_add(params);
        this.$router.replace("/login");
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20px;
  height: 100%;
  overflow: auto;
  .el-card {
    width: 60%;
    max-width: 800px;
    margin: 0 auto;
    .head {
      text-align: center;
      line-height: 50px;
      font-size: 26px;
      font-weight: bold;
    }
  }
  .box-form {
    width: 500px;
    margin: 0 auto;
  }
}
</style>